<template>
  <!-- 卡片组件 -->
  <view class="card">
    <!-- 标题 -->
    <view class="card-title">{{ content.title }}</view>
    <!-- 循环图片列表 -->
    <view class="card-list" :class="content.title === '销售管理' ? 'saleFlag' : ''">
      <view
        v-for="item in content.list"
        :key="item.url"
        :class="content.type === 'normal' ? 'normal' : 'small'"
        @click="jumpPage(item.text)"
      >
        <image v-if="item.text !== '联系客服'" :src="item.url" />
        <text v-if="item.text !== '联系客服'">{{ item.text }}</text>
        <button v-if="item.text === '联系客服'" class="card-button" open-type="contact">
          <image :src="item.url" />
          <text>{{ item.text }}</text>
        </button>
      </view>
    </view>
    <!-- 暂时支付 -->
    <view v-if="zhifu" class="zhifu">
      <input type="text" :value="value" placeholder="输入订单编号" @blur="zhifuBlur">
      <input type="text" style="margin-top:40rpx" :value="order" placeholder="请输入ubrOrder或selfOrder" @blur="orderBlur">
      <button @click="zhifula">支付</button>
      <button style="background-color:#ffffff" @click="zhifu=false">返回</button>
    </view>
  </view>
</template>
<script>
import { showToast } from '@utils/myApproach'
import { get } from '@utils/storage'
import { ticketPayment } from '@api/order'
export default {
  props: {
    content: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      zhifu: false,
      value: null,
      order: 'ubrOrder'
    }
  },
  methods: {
    jumpPage(text) {
      switch (text) {
        case '门票':
          uni.navigateTo({
            url: '/pages/mine/default/orderlist'
          })
          break
        case '优惠券':
          uni.navigateTo({
            url: '/pages/mine/default/coupon'
          })
          break
        case '年/季卡':
          uni.navigateTo({
            url: '/pages/mine/default/yearSeason'
          })
          break
        case '常用旅客':
          uni.navigateTo({
            url: '/pages/mine/default/contacts'
          })
          break
        case '酒店':
          showToast('敬请期待')
          break
        case '自营':
          console.log(123)
          uni.navigateTo({
            url: '/pages/mine/self/selfOrderList'
          })
          break
        case '获得token':
          uni.setClipboardData({
            data: get('token')
          })
          break
        case '自营商品支付':
          this.zhifu = true
          break
        case '我的二维码':
          uni.navigateTo({
            url: '/pages/mine/default/myQRcode'
          })
          break
        case '销售记录':
          uni.navigateTo({
            url: '/pages/mine/default/salesRecord'
          })
          break
        default:
          showToast('敬请期待')
          break
      }
    },
    // 同步input
    zhifuBlur(e) {
      this.value = e.detail.value
    },
    orderBlur(e) {
      this.order = e.detail.value
    },
    zhifula() {
      if (this.value === null) {
        showToast('请输入订单编号')
      } else {
        ticketPayment(this.order, this.value).then((response) => {
          const query = response.data.data
          uni.requestPayment({
            provider: 'wxpay',
            timeStamp: String(query.timeStamp),
            nonceStr: query.nonceStr,
            package: query.package,
            signType: query.signType,
            paySign: query.paySign,
            success: () => {
              showToast('支付成功')
            },
            fail: () => {
              showToast('未支付成功，请及时支付订单')
            }
          })
        })
      }
    }
  }
}
</script>
<style>
.card {
  min-height: 100%;
  border-radius: 20rpx;
  background-color: #ffffff;
  border: 2px solid #ffffff;
}
.card-title {
  margin-top: 40rpx;
  margin-left: 40rpx;
  font-weight: 600;
  font-size: 36rpx;
}
.card-list {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}
.normal {
  padding: 0;
  margin: 0;
  width: 33%;
  text-align: center;
  margin-top: 30rpx;
}
.normal > image {
  width: 56rpx;
  height: 56rpx;
}
.normal > text {
  font-size: 28rpx;
  display: block;
  margin-top: 10rpx;
}
.small {
  /* width: 112rpx; */
  width: 25%;
  text-align: center;
  margin-top: 30rpx;
}
.small:nth-child(5) {
  float: left;
}
.small > image {
  width: 56rpx;
  height: 56rpx;
}
.small > text {
  display: block;
  font-size: 28rpx;
  margin-top: 12rpx;
}
.card-button {
  padding: 0;
  margin: 0;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}
.card-button::after {
  border: none;
}
.card-button > image {
  width: 56rpx;
  height: 56rpx;
  margin: 0 auto;
}
.card-button > text {
  display: block;
  font-size: 28rpx;
  margin-top: 9rpx;
}
.saleFlag {
  justify-content: flex-start;
}
</style>
<style scoped>
.zhifu {
  width: 750rpx;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0rpx;
  z-index: 10000;
  background-color: azure;
}
.zhifu > input {
  margin-top: 200rpx;
  border: 2rpx solid black;
  width: 690rpx;
  margin-left: 30rpx;
}
.zhifu > button {
  width: 690rpx;
  margin-left: 30rpx;
  background-color: blue;
  margin-top: 20rpx;
}
</style>
